<template>
	<view>
		<uv-popup ref="popup" :mode="mode" :round="round" :closeOnClickOverlay="closeOnClickOverlay" :closeable="closeable" @change="change">
			<view class="popup-content">
				<slot name="content"></slot>
				<view class="popup-buttons" v-if="isShow">
					<uv-row customStyle="margin-bottom: 10px" gutter="10" class="margin-top">
						<uv-col span="6">
							<uv-button size="small" @click="cancel">取消</uv-button>
						</uv-col>
						<uv-col span="6">
							<uv-button size="small" type="primary" @click="confirm">确认</uv-button>
						</uv-col>
					</uv-row>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	name: 'Popup',
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		mode: {
			type: String,
			default: 'center'
		},
		round: {
			type: [String, Number],
			default: 0
		},
		closeOnClickOverlay: {
			type: Boolean,
			default: false
		},
		closeable: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		change(e) {
			console.log('弹窗状态改变：', e);
		},
		confirm() {
			console.log('确定按钮被点击');
			this.$emit('confirm');
			this.close();
		},
		cancel() {
			console.log('取消按钮被点击');
			this.$emit('cancel');
			this.close();
		},
		close() {
			this.$refs.popup.close();
		}
	}
};
</script>

<style scoped>
.popup-content {
	padding: 20rpx;
	text-align: justify;
}
</style>
